<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello Amaze UI</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="Cache-Control" content="no-siteapp"/>
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
        <link rel="stylesheet" href="css/iconfont.css" media="screen" title="no title">
        <!-- <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css"> -->
        <link rel="stylesheet" href="http://dcloud.io/hellomui/stream.js">
        <link rel="stylesheet" href="http://dcloud.io/hellomui/css/mui.min.css">
        <link rel="stylesheet" href="css/master.css" media="screen" title="no title">
        <link href="css/mobiscroll_002.css" rel="stylesheet" type="text/css">
    	<link href="css/mobiscroll.css" rel="stylesheet" type="text/css">
        <link href="css/mobiscroll_003.css" rel="stylesheet" type="text/css">
    </head>
    <body class="mui-ios mui-ios-9 mui-ios-9-1" style="background: #DDE1E1;">
        <div class="mui-content">
            <form class="mui-input-group" style="background: #DDE1E1;">
                <div class="mui-input-row head-button" style="height: 80px;padding:7px 15px;">
                    <button type="button" style="width:65px;height:65px;border-radius:50%;border:2px solid #fff !important;" class="mui-btn mui-btn-outlined select-timer">时</button>
                    <button type="button" style="width:65px;height:65px;border-radius:50%;border:2px solid #fff !important;" class="mui-btn mui-btn-outlined select-timer">天</button>
                    <button type="button" style="width:65px;height:65px;border-radius:50%;border:2px solid #fff !important;" class="mui-btn mui-btn-outlined select-timer">周</button>
                    <button type="button" style="width:65px;height:65px;border-radius:50%;border:2px solid #fff !important;" class="active mui-btn mui-btn-outlined select-timer">月</button>
                </div>
                <div class="mui-input-row" style="height: 60px;">
                    <label style="width: 20%;height: 60px;line-height:50px;"><i class="icon iconfont" style="font-size:25px;">&#xe630;</i></label>
                    <input type="text" style="width:80%;height: 60px;" readonly="readonly" id="appDateTime" class="mui-input-clear" placeholder="请输入密码">
                </div>
                <div class="mui-input-row" style="height: 60px;">
                    <label style="width: 20%;height: 60px;line-height:50px;"><i class="icon iconfont" style="font-size:25px;width: 20%;">&#xe610;</i></label>
                    <input type="text" style="width:80%;height: 60px;" class="mui-input-clear" placeholder="请输入密码">
                </div>
                <div class="mui-input-row" style="height: 60px;">
                    <label style="width: 20%;height: 60px;line-height:50px;"><i class="icon iconfont" style="font-size:25px;width: 20%;">&#xe675;</i></label>
                    <input type="text" style="width:80%;height: 60px;" class="mui-input-clear" placeholder="请输入密码">
                </div>
            </form>
            <span style="color:red;">注意：月、周、天、时需要21:00后才能预约次日，当日仅能预约时段</span>
            <div style="width:100%;height:200px;margin:auto;text-align:center;">
                <a style="width:170px;margin-top:50px;" href="./order-list.html" type="button" class="mui-btn mui-btn-primary">预约</a>
            </div>
        </div>
        <div id="datePlugin"></div>
    </body>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script> -->
    <script src="http://dcloud.io/hellomui/js/mui.min.js"></script>
    <script src="js/mobiscroll_002.js" type="text/javascript"></script>
	<script src="js/mobiscroll_004.js" type="text/javascript"></script>
    <script src="js/mobiscroll.js" type="text/javascript"></script>
    <script src="js/mobiscroll_003.js" type="text/javascript"></script>
	<script src="js/mobiscroll_005.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
			var currYear = (new Date()).getFullYear();
			var opt={};
			opt.date = {preset : 'date'};
			opt.datetime = {preset : 'datetime'};
			opt.time = {preset : 'time'};
			opt.default = {
				theme: 'android-ics light', //皮肤样式
		        display: 'modal', //显示方式
		        mode: 'scroller', //日期选择模式
				dateFormat: 'yyyy-mm-dd',
				lang: 'zh',
				showNow: true,
				nowText: "今天",
		        startYear: currYear - 10, //开始年份
		        endYear: currYear + 10 //结束年份
			};

		  	var optDateTime = $.extend(opt['datetime'], opt['default']);
		  	var optTime = $.extend(opt['time'], opt['default']);
		    $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
            $('.select-timer').click(function(){
                $('.select-timer').removeClass('active');
                $(this).addClass('active');
            })
        });
    </script>
</html>
